<template>
  <div id="app">
    <router-view />
    <van-tabbar v-model="active" placeholder>
      <van-tabbar-item replace to="/">
        <span>日子</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.active : icon.inactive"
        />
      </van-tabbar-item>
      <van-tabbar-item replace to="/Festival">
        <span>节日</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon2.active : icon2.inactive"
        />
      </van-tabbar-item>
      <van-tabbar-item replace to="/Calculator">
        <span>计算器</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon3.active : icon3.inactive"
        />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 0,
      icon: {
        active: require("../src/assets/label/inday.png"),
        inactive: require("../src/assets/label/day.png"),
      },
      icon2: {
        active: require("../src/assets/label/infestival.png"),
        inactive: require("../src/assets/label/festival.png"),
      },
      icon3: {
        active: require("../src/assets/label/incalculator.png"),
        inactive: require("../src/assets/label/calculator.png"),
      },
    };
  },
};
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  background-color: #f7f8fa;
}
</style>

